<template>
    <div>
        <div class="bos">
            <div class="boa">
                <div class="biaoT">
                    <img src="@/assets/imgSrc/biaoTou.png" alt="" />
                    <div class="biaoTZT">个人网盘</div>
                    <div class="icon-jiahao2fill" @click="add"></div>
                </div>
                <div class="gunD">
                    <div class="box" v-for="(item, index) in arr" :key="item.id" @mouseover="dowmloadover(index)"
                        @mouseleave="downloadleave(index)" :class="isAcitive === index ? 'isAcitive' : ''"
                        @click="lookorgDetail(item, index)">
                        <div class="boxLeft">
                            <img src="@/assets/img/theme/theme-night.png" alt="">
                        </div>
                        <div class="boxRight">
                            <div class="boxRightOne">{{ item.fileName }}</div>
                            <div class="boxRightTwo">
                                <span>{{ item.uploadTimeReturn }}</span>
                            </div>
                        </div>
                        <div class="icon-youbianjiantou"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MHNetdisk',

    data() {
        return {
            isAcitive: false, // 移入变色
            arr: [],
        }
    },
    created() {
        this.init()
    },
    mounted() {
    },

    methods: {
        init() {
            this.serch()
        },
        serch() {
            this.$api.GET('/modules/doorPersonalFile/list').then(res => {
                console.log('个人网盘', res);
                // console.log('111',this.$dictionary.get('APP_TYPE'))
                this.arr = res.data;
            });
        },
        // 鼠标点击事件 给变量赋值当前index
        lookorgDetail(item, index) {
            this.isAcitive = index
            // console.log(index);
        },
        add() {
            this.$router.push('/content/doorPersonalFile')
        },
        // 鼠标移入赋值index 
        dowmloadover(index) {
            this.isAcitive = index
            // console.log(index);
        },
        // 鼠标移出 
        downloadleave(index) {
            this.isAcitive = false
        },
    }
};
</script>

<style lang="less" scoped>
.isAcitive {
    cursor: pointer; // 鼠标小手
    background: #0031B4 !important;
}

.bos {
    border: 2px solid #0044ff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0 20px 0;
    box-shadow: inset 0px 0px 10px 34px rgba(3, 9, 90, 60%);
}

.biaoT {
    // width: 100%;
    text-align: center;
    position: relative;
    top: -5px;
    height: 50px;

    img {
        width: 300px;
    }

    .biaoTZT {
        color: #fff;
        position: relative;
        top: -62px;
        font-size: 21px;
        font-weight: 600;
    }
}

.gunD {
    padding: 20px 0;
    overflow: auto;
    height: 355px;
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
}

.boa {
    padding: 0 15px;
}

.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    background-color: rgba(0, 15, 70, 0.8);
    border-radius: 10px;
    margin-bottom: 10px;
    width: 420px;

    .boxLeft {
        // padding: 0px 20px 0 0;
        display: flex;
        align-items: center;

        img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }
    }

    .boxRight {
        width: 210px;

        .boxRightOne {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            padding-bottom: 10px;
            width: 210px;
            /* 设置元素的宽度 */
            white-space: nowrap;
            /* 禁止文字换行 */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .boxRightTwo {
            font-size: 15px;
            color: #8c93a1;

            .boxRight-spanOne {
                background-color: rgba(0, 15, 70, 0.8);
                font-weight: 600;
                padding-right: 10px;
            }
        }
    }
}</style>